<template>
    <view :data-theme="globPrimary">
        <u-popup v-model="showPopup" mode="right" width="100%" :z-index="zIndex">
            <u-navbar :title="title" :custom-back="onClose"></u-navbar>
            <view class="falce-model" v-if="showPopup">
                <view class="falce-box">
                    <!-- #ifdef H5 -->
                    <h5Video
                        ref="refFaceCanvas"
                        @success="photographSuccess"
                        @error="photographError"
                    ></h5Video>
                    <!-- #endif -->
                    <!-- #ifdef MP-WEIXIN -->
                    <wxVideo
                        ref="refFaceCanvas"
                        @success="photographSuccess"
                        @error="photographError"
                    ></wxVideo>
                    <!-- #endif -->
                </view>
                <view class="face-description">
                    <view class="item">
                        <u-image
                            width="44rpx"
                            height="44rpx"
                            src="@/static/images/phone_icon.png"
                        ></u-image>
                        <view class="text">正对手机</view>
                    </view>
                    <view class="item">
                        <u-image
                            width="44rpx"
                            height="44rpx"
                            src="@/static/images/light_icon.png"
                        ></u-image>
                        <view class="text">光线充足</view>
                    </view>
                    <view class="item">
                        <u-image
                            width="44rpx"
                            height="44rpx"
                            src="@/static/images/face_icon.png"
                        ></u-image>
                        <view class="text">脸无遮挡</view>
                    </view>
                </view>
                <block v-if="steps">
                    <slot v-if="$slots.footer" name="footer"></slot>
                    <div class="face-footer" v-else>
                        <edu-button type="primary" @click="onPhoto" class="btn" :disabled="loading"
                            ><u-icon name="camera-fill" color="#fff" size="28"></u-icon
                            >拍照</edu-button
                        >
                    </div>
                </block>
            </view>
        </u-popup>
        <u-modal
            v-model="showModal"
            :content="modalContent"
            :confirm-text="modalBtnText"
            :confirm-color="globPrimaryColor"
            :show-title="false"
            :z-index="zIndex"
            show-cancel-button
            @confirm="onConfirm"
            @cancel="onCancel"
            :confirm-style="{ borderLeft: '1px solid #DCDEE3' }"
        ></u-modal>
    </view>
</template>

<script>
/* #ifdef H5 */
import h5Video from './components/h5'
/* #endif */
/* #ifdef MP-WEIXIN */
import wxVideo from './components/wx'
/* #endif */
import { mapGetters } from 'vuex'
export default {
    components: {
        /* #ifdef H5 */
        h5Video,
        /* #endif */
        /* #ifdef MP-WEIXIN */
        wxVideo,
        /* #endif */
    },
    props: {
        // 标题文字
        title: {
            type: String,
            default: '人脸验证',
        },
        // 自定义返回逻辑
        customBack: {
            type: Function,
            default: null,
        },
        // 弹出内容的z-index值
        zIndex: {
            type: Number,
            default: 10075,
        },
    },
    data() {
        return {
            steps: false,
            loading: false,
            img: null,
            showPopup: false,
            showModal: false,
            modalContent: '',
            modalBtnText: '',
        }
    },
    computed: {
        ...mapGetters({
            globPrimary: 'designSetting/getGlobTheme',
            globPrimaryColor: 'designSetting/getGlobThemeColor',
            userInfo: 'user/getUserInfo',
        }),
        faceStatus() {
            return this.userInfo.face_verified
        },
    },
    methods: {
        // 拍照
        onPhoto() {
            this.loading = true
            this.$refs.refFaceCanvas.takePhoto().then((file) => {
                setTimeout(() => {
                    this.$emit('confirm', file)
                }, 500)
            })
        },
        // 重拍
        resetPhoto() {
            this.$refs.refFaceCanvas.resetPhoto()
            this.img = null
            setTimeout(() => {
                this.loading = false
            }, 500)
        },
        // 摄像头调用成功
        photographSuccess() {
            this.steps = true
        },
        // 摄像头调用失败
        photographError() {
            this.steps = false
        },
        onFace() {
            this.onOpen()
        },
        // 提示
        onFaceMessage() {
            let title = ''
            let btnText = ''
            if (this.faceStatus) {
                title = '请进行人脸验证'
                btnText = '去验证'
            } else {
                title = '未完成人脸认证，请先去认证'
                btnText = '去认证'
            }
            this.modalContent = title
            this.modalBtnText = btnText
            this.showModal = true
        },
        onConfirm() {
            this.showModal = false
            if (this.faceStatus) {
                this.onOpen()
            } else {
                this.$u.route('/pageUser/setting/face')
            }
        },
        onCancel() {
            this.showModal = false
            this.$emit('cancel')
        },
        onOpen() {
            this.showPopup = true
        },
        onClose() {
            // 如果自定义了点击返回按钮的函数，则执行，否则执行返回
            if (typeof this.customBack === 'function') {
                this.customBack.bind(this.$u.$parent.call(this))()
            } else {
                this.showPopup = false
                setTimeout(() => {
                    this.loading = false
                }, 1000)
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.falce-model {
    .falce-box {
        margin-top: 140rpx;
        display: flex;
        justify-content: center;
    }
    .face-description {
        display: flex;
        justify-content: space-around;
        margin: 120rpx auto 0;
        .item {
            display: flex;
            align-items: center;
            flex-direction: column;
            .text {
                margin-top: 15rpx;
                font-size: 24rpx;
                color: #606266;
            }
        }
    }
    .face-footer {
        margin-top: 100rpx;
        display: flex;
        justify-content: center;
        .btn {
            width: 256rpx;
        }
        .u-icon {
            margin-right: 10rpx;
        }
    }
}
</style>
